<template>
  <div class="header">
    <router-link tag="div" to="/" class="header-abs" v-show="showAbs"><span class="iconfont abs-back">&#xe624;</span></router-link>
    <router-link :style="opacityStyle" tag="div" to="/" class="header-fixed" v-show="showFixed">
      分界洲岛
      <div class="header-back">
       <span class="iconfont abs-back">&#xe624;</span>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'DetailHeader',
  data () {
    return {
      showAbs: true,
      opacityStyle: {opacity: 0}
    }
  },
  computed: {
    showFixed () {
      return !this.showAbs
    }
  },
  methods: {
    handleScroll () {
      let top = document.documentElement.scrollTop
      if (top > 60) {
        if (this.showAbs) {
          this.showAbs = false
        }
        let opacity = top / 140
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle.opacity = opacity
      } else {
        this.showAbs = true
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.handleScroll)
  },
  deactivated () {
    window.removeEventListener('scroll', this.handleScroll)
    this.showAbs = true
    this.opacityStyle.opacity = 0
  }
}
</script>

<style lang="stylus" scoped>
  .header-abs
    position:absolute
    width:.72rem
    height:.72rem
    line-height:.72rem
    text-align:center
    left:.1rem
    top:.1rem
    background:rgba(0,0,0,0.8)
    border-radius:50%
    .abs-back
      color:#fff
  .header-fixed
    z-index:4
    position:fixed
    top:0
    left:0
    right:0
    text-align:center
    line-height:.88rem
    font-size:.32rem
    background:#00bcd4
    color:#fff
    .header-back
      position:absolute
      left:0
      top:0
      width:.8rem
      height:.88rem
      line-height:.88rem
</style>
